<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>鼎吉驾校</title>
		<meta name="description" content="Yan">
		<meta name="keywords" content="Yan">
		<meta name="author" content="Yan">
		<script src="../static/js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/custom1.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=DBd897f58d7a63e585485e3dea011253"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=DBd897f58d7a63e585485e3dea011253&amp;services=&amp;t=20181029172410"></script>

		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


		<link rel="stylesheet" type="text/css" href="../static/css/normalize.css">
		<link rel="stylesheet" type="text/css" href="../static/css/default.css">
		<link rel="stylesheet" href="../static/css/main.css">
		<link rel="stylesheet" href="../static/css/examples.css">
		<!-- Themes -->
		<link rel="stylesheet" href="../static/css/bars-1to10.css">
		<link rel="stylesheet" href="../static/css/bars-movie.css">
		<link rel="stylesheet" href="../static/css/bars-square.css">
		<link rel="stylesheet" href="../static/css/bars-pill.css">
		<link rel="stylesheet" href="../static/css/bars-reversed.css">
		<link rel="stylesheet" href="../static/css/bars-horizontal.css">

		<link rel="stylesheet" href="../static/css/fontawesome-stars.css">
		<link rel="stylesheet" href="../static/css/css-stars.css">
		<link rel="stylesheet" href="../static/css/bootstrap-stars.css">


		<link rel="stylesheet" type="text/css" href="../static/css/reset.css">
		<link rel="stylesheet" type="text/css" href="../static/css/swiper-3.4.1.min.css">
		<link rel="stylesheet" type="text/css" href="../static/css/custom.css">
		<link rel="stylesheet" type="text/css" href="../static/css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="../static/css/new_add.css" />
		<style type="text/css">
			.container {
				padding-bottom: 10rem;
			}

			#activity {
				display: flex;
				padding: 3rem 2rem;
				box-sizing: border-box;
			}

			.boxsrc {

				display: flex;
				justify-content: space-between;
				overflow-x: scroll;
			}

			.boxsrc::-webkit-scrollbar {
				width: 0;
			}

			#activity .modal-body input {
				display: none;
			}

			#activity .modal-body {
				margin-left: 0;
				padding: 2rem 1rem;
			}

			.modal-body-active {
				position: relative;
			}

			.modal-body-active::after {
				content: "";
				widows: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				border: 1px solid #0067FF;
				border-radius: 1rem;
			}

			.activity-name {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: right;
			}

			.yhq-code {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: right;
			}

			.more-jt {
				margin-left: 1rem;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../static/css/font-awesome.min.css" />
	</head>

	<body>
		<!--[if lt IE 9]>对不起，浏览器版本太低~！<![endif]-->
		<div class="container sign">
			<div class="row mold-on">
				<label for="">
					<input type="hidden" name="class" id="grade_id" value="">
					<font class="gradename"></font>（C<font class="gradetype"></font>）
				</label>
				<span class="right" id="payable">
					<!-- {$grade.price} -->
				</span>
			</div>

			<div class="row address">
				<a id="address" style="display: flex;justify-content: space-between;">

					<span><span>场地:<span><input type="hidden" name="class" id="area_id" value="">
								<font class="gradearea_name"></font>
							</span></span></span>
					<span class="map right">
						<!-- <img src="../static/images/map1.png" width="20" /> -->
						<span class="fa fa-map-marker"></span>
						>
					</span>
				</a>
			</div>

			<div class="row address" onclick="javascript:jts()">
				<span class="left">活动</span>
				<span class="map activity-tjm activity right"><span class="activity-name"></span>
					<span yhqid="" id="coupon_id" class="yhq-code"></span><span class="more-jt">></span></span>
			</div>

			<div class="row address" onclick="javascript:dr_submit()">
				<span class="left">推荐码</span>
				<span class="map activity-tjm tjm-code right" id="inviter" inviterid="">填写推荐码 <span class="more-jt">></span></span>
			</div>

			<div class="row address total" id="total">
				<span>费用合计</span>
				<span class="count right"> <span class="total-count"></span>元</span>
			</div>


			<div class="row notice">
				<h1 class="col-xs-12">填写信息</h1>
				<div class="col-xs-12">
					<input type="text" name="name" id="name" placeholder="请输入您的姓名" />

					<input type="text" name="phone" id="phone" placeholder="请输入您的电话" />
					<input type="text" name="cno" id="cno" placeholder="请输入您的身份证号码" />
				</div>
				<div class="xieyi">
					<span>
						<input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red" value="#f0544d" />
						<label for="color-input-red"></label>

						<span class="text">我已阅读并同意</span>
						<span class="color"><a href="../enlist/agreement.html">《鼎吉驾校学车协议》</a> </span>
					</span>
					<span class="right" id="other" onclick="javascript:other()">其他</span></div>
			</div>






		</div>
		<div class=" enroll">
			<a href="tel:400-689-8909">
				<div class="col-xs-4 enroll-call">
					<p>咨询热线</p>
					<p>400-689-8909</p>
				</div>
			</a>
			<a class="col-xs-8 enroll-btn" href="javascript:" onclick="submit_sign()">我要报名</a>
		</div>
		<div class="c_alert_dialog dialog_open" style="display: none">
			<div class="c_alert_mask" ontouchmove="return false"></div>
			<div class="c_alert_wrap c_alert_width">

				<div class="row">
					<div class="modal-body tuijian">
						<div>
							<input type="text" name="code" id="code" placeholder="请输入推荐码">
						</div>
						<div id="referral"></div>
					</div>
					<div class="modal-body">
						<div>
							<input type="submit" id="confirm" class="confirm" value="确认">
						</div>
					</div>
				</div>


			</div>
		</div>

		<div class="c_alert_dialog jts" style="display: none">
			<div class="c_alert_mask" ontouchmove="return false"></div>
			<div class="c_alert_wrap c_alert_width">

				<div class="row" id="activity">
					<!-- {volist name="activity" id="item"}
            <div class="modal-body">
                <input type="radio" value="{$item.id}" name="activity_id" style="width: 25px;">
                <div><img src="{:get_cover($item['icon'],'path')}" width="83" height="83"/> <br/>{$item.name}</div>
                <div><span>{$item.description}</span></div>
            </div>
            {/volist} -->

				</div>


				<div class="modal-body yhq" style="width:100%;margin-left: 0;">
					<div>
						<input type="text" name="code" id="yhq_code" placeholder="如果你有优惠券请输入优惠券编码">
					</div>
					<div id="coupon"></div>
				</div>
				<div class="modal-body yhq" style="width:100%;margin-left: 0;">
					<div>
						<input type="submit" id="yhq" class="confirm" value="确认">
					</div>
				</div>


			</div>
		</div>


		<div class="c_alert_dialog other" style="display: none">
			<div class="c_alert_mask" ontouchmove="return false"></div>
			<div class="c_alert_wrap c_alert_width">

				<div class="row">
					<div class="modal-body">
						<div>
							<input type="radio" value="1" name="other" checked style="display: none">
							<label><input type="radio" value="2" name="other" class="other-input">定金支付</label>
							<label><input type="radio" value="3" name="other" class="other-input">线下支付</label>
						</div>
					</div>
					<div class="modal-body">
						<div>
							<input type="submit" id="confirm-other" class="confirm" value="确认">
						</div>
					</div>
				</div>


			</div>
		</div>



		<script src="../static/js/apiRoot.js" type="text/javascript" charset="utf-8"></script>
		<script src="api.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/lazy-load-img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/lazy-load.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//点击选中 再次点击取消
			$(function() {


				let grade_detail = JSON.parse(sessionStorage.getItem("grade_detail"));
				getBaiduLocation("#address", latlng.lng, latlng.lat, grade_detail.lng, grade_detail.lat); //转换为百度坐标
				sessionStorage.setItem("total_count", grade_detail.price);
				subsign();
				$('input:radio').click(function() {

					var domName = $(this).attr('name');

					var $radio = $(this);
					// if this was previously checked
					if ($radio.data('waschecked') == true) {
						$radio.prop('checked', false);
						$("input:radio[name='" + domName + "']").data('waschecked', false);
						//$radio.data('waschecked', false);
					} else {
						$radio.prop('checked', true);
						$("input:radio[name='" + domName + "']").data('waschecked', false);
						$radio.data('waschecked', true);
					}
				});

				$(".jts .c_alert_mask").click(function() {
					$(".jts").hide();
				});
				$(".c_alert_dialog .c_alert_mask").click(function() {
					$(".c_alert_dialog").hide();
				});


				$("#confirm-other").click(function() {
					$(".other").hide();

					var check_val = $('input:radio[name="other"]:checked').val();
					let total_count = sessionStorage.getItem("total_count");
					//全款支付
					if (check_val == undefined || check_val == null || check_val == "undefined" || check_val == "null" ||
						check_val == "") {
						var tem = '<span>费用合计</span>' +
							'<span class="count right"> <span class="total-count">' + parseFloat(total_count) + '</span>元</span>';
						$("#total").html(tem);
						$(".sign .total").css('height', '45');
					}
					//定金支付
					if (check_val == 2) {
						var template =
							'<div class="left djzf" style="padding-top: 0px;"><span>费用合计<span class="xf">您可以先付定金抢占名额</span></span></div>' +
							'<div class="right djzf"><span class="count right"> <input type="text" name="deposit" id="deposit" placeholder="300-' +
							parseFloat(total_count) + '">元(定金)</span></div>';

						$("#total").html(template);
						$(".sign .total").css('height', '70');
					}
					//线下支付
					if (check_val == 3) {
						var tem = '<span>费用合计</span>' +
							'<span class="count right"> 0元</span>';
						$("#total").html(tem);
						$(".sign .total").css('height', '45');
					}
					inputblur();


				});
				//活动选择
				$("#activity .modal-body").on("click", function() {
					if ($(this).hasClass("modal-body-active")) {
						$(this).removeClass("modal-body-active");
						$(".activity .activity-name").html("");
						if ($(".activity .yhq-code").html() == "") {
							$(".activity").addClass("activity-tjm");
						}
						sessionStorage.setItem("hdtype", 0);
						sessionStorage.setItem("hdamount", 0);
						let count = total_menoy(sessionStorage.getItem("hdtype"), sessionStorage.getItem("hdamount"), sessionStorage.getItem(
							"yhqamount"));
						$(".total-count").html(count);
					} else {
						$('input:radio[name="activity_id"]').attr("checked", false);
						$(this).addClass("modal-body-active").siblings(".modal-body").removeClass("modal-body-active");
						$(this).find('input:radio[name="activity_id"]').attr("checked", true);
						let total_count = sessionStorage.getItem("total_count");
						if ($(this).find('input:radio[name="activity_id"]').attr("checked")) {
							var activity = $(this).find('input:radio[name="activity_id"]').val();
							let ajaxdata = {
								activity_id: activity
							};
							let data = ajaxPost(sign_activity_detail, ajaxdata);
							if (data.status == "200") {
								sessionStorage.setItem("hdtype", data.data.type);
								sessionStorage.setItem("hdamount", data.data.amount);
								let count = total_menoy(sessionStorage.getItem("hdtype"), sessionStorage.getItem("hdamount"),
									sessionStorage.getItem("yhqamount"));
								$(".total-count").html(count);
								$(".activity .activity-name").html(data.data.name);
								$(".activity").removeClass("activity-tjm");

							} else {
								alert(data.msg);
							}
						}
					}
				})
				inputblur();

			});


			//优惠券确认
			$("#yhq").on("click", function() {
				$(".jts").hide();
				//do something
				var code = $("#yhq_code").val();
				if (code) {
					yhq_code(code)
				} else if (code == "") {
					sessionStorage.setItem("yhqamount", 0)
					let count = total_menoy(sessionStorage.getItem("hdtype"), sessionStorage.getItem("hdamount"), sessionStorage.getItem(
						"yhqamount"));
					$(".total-count").html(count);
					$(".yhq-code").html("");
					$(".yhq-code").attr("yhqid", "");
					$(".yhq-code").css({
						"flex": "none"
					})
					if ($(".activity .activity-name").html() == "") {
						$(".activity").addClass("activity-tjm");
					}
				}

			});

			//推荐码确认
			$("#confirm").click(function() {
				$(".dialog_open").hide();
				//do something 查询推荐码是否有效
				var code = $("#code").val();

				if (code) {
					referral(code);
				}


			});



			function dr_submit() {
				$(".dialog_open").show();

			}

			function jts() {
				$(".jts").show();
			}

			function other() {
				$(".other").show();
			}
		</script>


	</body>
</html>
